<template>
  <div class="writing">
    <div class="content">
      <span class="text">反馈内容:</span>
      <span class="text_icon">*</span><br>
      <textarea class="input" v-model="content"></textarea>
    </div>
    <div class="communication">
      <span class="text">联系方式:</span><br>
      <input class="input"  autocomplete="off">
    </div>
    <div class="submit" @click="submitOpinion()">
      <span class="text">确认提交</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'write',
  data () {
    return {
      content: ''
    }
  },
  methods: {
    submitOpinion () {
      if (this.content === '') {
        return
      }
      this.$emit('submitOpinion')
    }
  }
}
</script>

<style lang="scss" scoped>
  .writing{
    width: 100%;
    /*border: px2rem(2) solid red;*/
    @mixin text{
      color: $text-color;
      font-size: $text-size-imp;
      font-weight: bold;
      line-height: px2rem(25);
    }
    @mixin input{
      width: 95%;
      height: px2rem(165);
      padding: 0 px2rem(8);
      margin-top: px2rem(6);
      line-height: px2rem(25);
      border: 0;
      border-radius: px2rem(4);
      background-color: #FFF;
      font-size: $text-size-normal;
      color: $text-color;
    }
    .content{
      width: 85%;
      height: px2rem(196);
      /*border: px2rem(2) solid red;*/
      margin: px2rem(20) auto 0;
      .text{
        @include text;
      }
      .text_icon{
        color: #F84545;
        font-size: $text-size-imp;
        font-weight: bold;
        line-height: px2rem(25);
      }
      .input {
        @include input;
        height: px2rem(165);
      }
    }
    .communication{
      width: 85%;
      height: px2rem(67);
      /*border: px2rem(2) solid red;*/
      margin: px2rem(12) auto 0;
      .text{
        @include text;
      }
      .input {
        @include input;
        height: px2rem(36);
      }
    }
    .submit {
      width: 75%;
      height: px2rem(44);
      margin: px2rem(55) auto 0;
      border-radius: px2rem(24);
      background: -webkit-linear-gradient(to right,$gradients-color-lightblue, $ui-color-assist-purple); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(to right,$gradients-color-lightblue, $ui-color-assist-purple); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(to right,$gradients-color-lightblue, $ui-color-assist-purple); /* Firefox 3.6 - 15 */
      background: linear-gradient(to right,$gradients-color-lightblue, $ui-color-assist-purple); /* 标准的语法 */
      text-align: center;
      .text {
        font-size: $text-size-imp;
        color: #FFF;
        line-height: px2rem(44);
      }
    }
  }
</style>
